/*Stylesheet to create the galleries*/
.photocontainer {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.img1x2 {
	display: grid;
	grid-gap: 10px;
	grid-area: span 2;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.img1x3 {
	display: grid;
	grid-gap: 10px;
	grid-area: span 3;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.img2x1 {
	display: grid;
	grid-gap: 10px;
	grid-area: span 1 / span 2;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.img3x1 {
	display: grid;
	grid-gap: 10px;
	grid-area: span 1 / span 3;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.img4x1 {
	display: grid;
	grid-gap: 10px;
	grid-area: span 1 / span 4;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.img2x2 {
	display: grid;
	grid-gap: 10px;
	grid-area: span 2 / span 2;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.img3x3 {
	display: grid;
	grid-gap: 10px;
	grid-area: span 3 / span 3;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.img2x3 {
    display: grid;
	grid-gap: 10px;
	grid-area: span 3 / span 2;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

@media only screen and (max-width: 1628px) {
	.img4x1{
		grid-area: span 1 / span 3;
	}
}


@media only screen and (max-width: 1234px) {
    .img3x1{
		grid-area: span 1 / span 2;
	}

    .img4x1{
		grid-area: span 1 / span 2;
	}
    
    .img2x2{
		grid-area: span 2 / span 2;
	}

    .img3x3{
		grid-area: span 2 / span 2;
	}

    .img2x3{
		grid-area: span 2 / span 2;
	}
}

@media only screen and (max-width: 833px) {
	.img2x1{
		grid-area: auto;
	}

    .img3x1{
		grid-area: auto;
	}

    .img4x1{
		grid-area: auto;
	}

    .img2x2{
		grid-area: auto;
	}

    .img3x3{
		grid-area: auto;
	}

    .img2x3{
		grid-area: auto;
	}
}

.img1x2 a {
	grid-area: span 2;
}

.img1x3 a {
	grid-area: span 3;
}

.img2x1 a {
	grid-area: span 1 / span 2;
}

.img3x1 a {
	grid-area: span 1 / span 3;
}

.img4x1 a {
	grid-area: span 1 / span 4;
}

.img2x2 a {
	grid-area: span 2 / span 2;
}

.img3x3 a {
	grid-area: span 3 / span 3;
}

.img2x3 a {
    grid-area: span 3 / span 2;

}

@media only screen and (max-width: 1628px) {
	.img4x1 a{
		grid-area: span 1 / span 3;
	}
}

@media only screen and (max-width: 1234px) {
	.img3x1 a {
		grid-area: span 1 / span 2;
	}

    .img4x1 a {
		grid-area: span 1 / span 2;
	}

    .img2x2 a {
		grid-area: span 2 / span 2;
	}

    .img3x3 a {
		grid-area: span 2 / span 2;
	}

    .img2x3 a {
		grid-area: span 2 / span 2;
	}
}

@media only screen and (max-width: 833px) {
	.img2x1 a {
		grid-area: auto;
	}
    
    .img3x1 a {
		grid-area: auto;
	}
    
    .img4x1 a {
		grid-area: auto;
	}

    .img2x2 a {
		grid-area: auto;
	}

    .img3x3 a {
		grid-area: auto;
	}

    .img2x3 a {
		grid-area: auto;
	}
}

.img1x1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img1x3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img1x2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img4x1 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img3x1 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img2x1 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img2x2 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img3x3 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img2x3 img {
    width: 100%;
	height: 100%;
	object-fit: cover; 
}